В крайнем Chrome (137) появился if для CSS

div {
  color: var(--color);
  background-color: if(style(--color: white): black; else: white);
}

.dark { --color: black; }
.light { --color: white; }

#chrome #css

#meme #react #creative #video

Мурыч про TypeScript и статическую типизацию

#murych #audio #ts

Раньше я думал, что JavaScript нужно заменять полностью, но сейчас согласен с Мурычем - достаточно статической типизации примитивов.

Причем, он предлагал "вьюшную" модель - если Ref инициализирован строкой, то и дальше в нем только строки. Так же с переменными по примитивным типам в JS

Cтатическая типизация примитивных типов плюс ES классы решат 95%+ всех проблем без извращений TS

#ts #js #murych

W3C Technical Architecture Group (TAG) представил Принципы Этичного Веба, которые призваны направить веб-сообщество на создание более этичного и социально ответственного интернета. Эти принципы включают:

Есть один веб
Веб не причиняет вреда обществу
Веб поддерживает здоровое сообщество и дебаты
Веб для всех людей
Веб безопасен и уважает конфиденциальность людей
Веб обеспечивает свободу слова
Веб позволяет проверять информацию
Веб усиливает контроль и власть отдельных лиц
Веб является экологически устойчивой платформой
Веб прозрачен
Веб является многобраузерным, много-операционным и для многих устройств
Веб может быть потреблен любым способом, который выбирают люди

Эти принципы не только теоретические, но и призывают всех участников веб-сообщества оценивать влияние своих вкладов на общество и окружающую среду.

Оцениваем

#w3c #ethic

Freelance

#video #freelance

Один немолодой джаваскриптер, большой любитель кошек, имеющий онкозаболевание, критикующий распространенные фронтенд фреймворки, продвигающий свою идеологию рассказывает о своей жизни

#people

Вышел Vite 7 beta.0, который готовят под Rolldown

Меж тем Vite с Rolldown можно уже использовать через опубликованный пару дней назад специальный форк Vite - rolldown-vite

Кто-то уже пробовал?

#vite #rolldown

В Москве митапнулись модные вьюшники на msk_vue_js

#event

const project = shallowRef(null as Project);

Как типизировать shallowRef ES классом

#reactivity

Метод navigator.sendBeacon() предоставляет возможность гарантированно отправить небольшой объем данных на сервер, даже если пользователь закрывает страницу или браузер. В отличие от традиционных AJAX-запросов, которые могут быть прерваны при выгрузке страницы, sendBeacon обеспечивает доставку данных в таких сценариях.

Браузер дает запросу sendBeacon приоритетное выполнение перед завершением работы страницы, что делает этот метод идеальным для критически важных данных.

Практические применения

- Финализация аналитических данных - отправка собранной за сессию аналитики перед закрытием страницы
- Автосохранение - сохранение последнего состояния приложения, которое пользователь мог не сохранить явно
- Отчеты об ошибках - гарантированная отправка логов о критических ошибках
- Трекинг поведения - фиксация последних действий пользователя перед уходом

const data = JSON.stringify({event: 'page_close', time: Date.now()});
navigator.sendBeacon('/analytics', data);

Ограничения

- Максимальный размер полезной нагрузки ограничен (обычно 64Кб)
- Поддерживает только POST-запросы
- Не поддерживает кастомные заголовки
- Ответ сервера не может быть обработан

#tip

Во Vue используется модель потока данных: "данные вниз, события наверх"

Но иногда всё-таки нужно послать событие дочернему компоненту, и в этом случае используется defineExpose. Это вполне соответствует лучшим практикам обычного HTML и DOM API

Основные use cases:

- открыть/закрыть модалку
- установить фокус
- сбросить форму
- валидировать поле
- обновить данные
- включить/выключить аудио/видео/анимацию

#expose

Cursor дорос до 1.0.0 версии

Обнов много - memories, review PR-ов, MCP в один клик, диаграммы и таблицы в ответах в чате и другое

Вообще, это IDE довольно быстро развивается последние недели и, тьфу-тьфу-тьфу, более-менее стабильно работает

#ai #cursor

Несколько месяцев назад Cursor (и другие, наверно, тоже) научились работать с линтером, за один прогон исправляя ошибки

Можно пойти дальше - попросите Cursor написать и использовать тестовый скрипт для проверки некого функционала (без каких либо тестовых библиотек), который вы ему заказали. Тогда агент будет в цикле сам запускать этот скрипт, который будет проверять правильность уже проектного кода, ставить логи, изучать ошибки и исправлять их, пока всё не пофиксит. Часто он делает это сам.

Экономия времени и кредитов.

(не для vue, для js, py, php etc).

P.S. В новом Курсоре появилась фича Run agent in Clouds, включенная по умолчанию, из-за которой редактор начинает жутко тормозить. Можно отключить.

#ai #cursor #tip

Любимая рубрика "В мире животных"

#offtop #video #animals

При использовании router-view с transition с mode="out-in" в dev режиме при переходах по роутам часто ловится белый экран

Единственное найденное решение - отключать этот mode в dev режиме

<router-view v-slot="{ Component }">
  <Transition mode="out-in">
    <component :is="Component" />
  </Transition>
</router-view>

#router #tip

Пара советов с утра от автора "Clean code" Боба Мартина

#architecture #bobmartin